<template>
  <el-dialog
    :visible.sync="dialogVisible"
    :modal="false"
    :before-close="closeDialog"
    :show-close="false"
    class="my-info-dialog"
    customClass="customWidth"
    @open="open()" top="10px">
    <dv-border-box-3 style="width: 1785px;height: 945px;margin-left: -23px;margin-top: -33px">
      <dv-border-box-8 style="width: 1785px;height: 945px;margin-left: -23px;margin-top: -33px">
        <br>
        <div class="sub_titleBar">
          <dv-decoration-4 :reverse="true"
                           style="float: left;width:590px;height:15px;margin-top: 43px;margin-left: 50px;"/>
          <dv-decoration-1 style="position: absolute;left: 11%;width:600px;height:50px;"/>
          <div class="sub_title">案件事故分析</div>
          <dv-decoration-1
            style="position: absolute;right: 9%;width:600px;height:50px;transform: rotateY(180deg);transition:0.5s;"/>
          <dv-decoration-4 :reverse="true"
                           style="float: right;width:590px;height:25px;margin-top: 43px;margin-right: 50px;transform: rotateY(180deg);transition:0.5s;"/>
        </div>
        <main>
          <div class="left">
            <!--  表：案件行业发布  -->
            <div class="data3_table">
              <div class="table_title height_left3">案件行业分布</div>
              <div style="width:55%;height:90%;float: left">
                <div id="id_case" style="width:100%;height:100%;"/>
              </div>
              <div style="float: left;width:35%;margin-right: 5%;color: #fff;margin-top: 6%;">
                <div v-for="(item,index) in data_pie" :key="index">
                  <div style="display: inline-block;float: left;width: 15px;height: 6px;margin-top: 3%"
                       :style="'backgroundColor:' + item.color"></div>
                  <div style="display: inline-block;float: left;font-size: 0.8rem;margin-left: 2%">{{ item.industry }}
                  </div>
                  <div style="display: inline-block;float: right">{{ item.proportion }}%</div>
                  <br>
                </div>
              </div>
            </div>
            <br>
            <!--   案件办理平均周期    -->
            <div class="data3_table">
              <div class="table_title height_left3">案件办理平均周期</div>
              <div id="table_left6" style="width: 100%;height: 100%;"/>
            </div>
          </div>
          <div class="mid">
            <!--  表：案件处置协同  -->
            <div class="right_data2">
              <div class="table_title height_left3">案件处置协同</div>
              <div id="table_right3" style="width: 100%;height: 90%"/>
            </div>
            <br>
            <div class="right_data2">
              <div class="table_title height_left3">案件数</div>
              <div id="cases" style="width: 100%;height: 100%"/>
            </div>
          </div>
          <div class="right">
            <!--  表：重点企业名单  -->
            <div class="right_data2">
              <div class="table_title height_left3">重点企业名单</div>
              <dv-scroll-board :config="config_data1" class="data2_table"/>
            </div>
            <br>
            <!--  表：最新办结清单  -->
            <div class="right_data2">
              <div class="table_title height_left3">最新办结清单</div>
              <dv-scroll-board :config="config_data2" class="data2_table"/>
            </div>
          </div>
          <div class="bottom">
            <div class="table1">
              <div class="data2_title">
                <dv-decoration-7 style="width:300px;height:50px;margin: 0 auto">事故案件申报动态</dv-decoration-7>
              </div>
              <dv-scroll-board :config="config_data3" class="data_table"/>
            </div>
            <div class="water">
              <dv-decoration-9
                style="float: left;width:210px;height:210px;margin-left: 10%;color: #ffffff;font-size: 20px;">案件数：{{cases}}个
              </dv-decoration-9>
              <dv-decoration-9
                style="float: left;width:210px;height:210px;margin-left: 10%;color: #ffffff;font-size: 20px">事故率：{{accidentRate}}%
              </dv-decoration-9>
            </div>
          </div>
        </main>
      </dv-border-box-8>
    </dv-border-box-3>
  </el-dialog>
</template>

<script>
import echarts from "echarts";
import api from "@/api/gs";
import {round} from "_echarts@4.9.0@echarts/src/util/number";
import axios from "_axios@0.25.0@axios";

const Highcharts = require('highcharts')

export default {
  name: "screen1",
  props: {
    dialogVisible: Boolean
  },
  data() {
    return {
      formData: {},
      config_data1: {
        header: ['名称', '案件数', '事故率'],
        data: [],
        index: true,
        indexHeader: '序号',
        columnWidth: [55],
        rowNum: 5,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#041A33',
        evenRowBGC: '#041F3A'
      },
      config_data2: {
        header: ['姓名', '工伤等级', '办结时间','周期'],
        data: [],
        index: true,
        indexHeader: '序号',
        columnWidth: [80,150,150,200,100],
        rowNum: 5,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#041A33',
        evenRowBGC: '#041F3A'
      },
      data_pie: [
        {
          color: '#DD001B',
          industry: '建筑业',
          proportion: 15
        },
        {
          color: '#FD6431',
          industry: '保险业',
          proportion: 10
        },
        {
          color: '#F48C90',
          industry: '房地产',
          proportion: 15
        },
        {
          color: '#71C9FD',
          industry: '计算机',
          proportion: 13
        },
        {
          color: '#50A1F7',
          industry: '服装业',
          proportion: 10
        },
        {
          color: '#A16D08',
          industry: '公益组织',
          proportion: 9
        },
        {
          color: '#D6EBAA',
          industry: '广告业',
          proportion: 7
        },
        {
          color: '#29AB91',
          industry: '航空航天',
          proportion: 5
        },
        {
          color: '#D6E0F2',
          industry: '金融业',
          proportion: 4
        },
        {
          color: '#FEEDE8',
          industry: '因特网',
          proportion: 3
        },
      ],
      data: {
        cbrs: {
          name: '参保人数', // 单元名
          chart: { //图表配置
            legend: ['工伤', '建筑工伤'], //图例
            xData: ['7月', '8月', '9月', '10月', '11月', '12月'], //横轴数据项
            yData: { //竖轴配置
              min: 0, //初始值
              max: 3000, //最大值
              interval: 1000, //刻度间隔
              name: '万人', //单位
            },
            series: [ //实际数据配置
              {
                name: '工伤', //数据类别
                data: [1520, 1532, 1801, 2254, 2650, 1400], //实际数据
              },
              {
                name: '建筑工伤',
                data: [1720, 2232, 2801, 2134, 2250, 1800],
              },
            ]
          },
        }
      },
      config_data3: {
        header: ['姓名 ', '身份证', '统筹区', '医院', '时间', '金额'],
        data: [
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1'],
          ['行1列2', '行1列3', '行1列1', '行1列2', '行1列3', '行1列1']
        ],
        index: true,
        indexHeader: '序号',
        columnWidth: [65],
        rowNum: 4,
        align: ['center'],
        headerBGC: '#1A293C',
        oddRowBGC: '#023358',
        evenRowBGC: '#041F3A'
      },
      myChart: null,
      // 统筹区编码
      areaCode: '330799',
      // 数据年份
      year: '2021',
      // 当前月的上月往前推6个月的月份
      firstMonth: '',
      // 当前月的上月
      lastMonth: '',
      accidentRate:0,
      cases:0,
    }
  },
  methods: {
    // 月份初始化
    initMonth() {
      const date = new Date();
      let year = date.getFullYear();
      const lastMonthTemp = date.getMonth();
      this.lastMonth = year + ('' + lastMonthTemp).padStart(2, '0');
      let firstMonthTemp = lastMonthTemp - 5;
      if (firstMonthTemp <= 0) {
        year -= 1;
        this.firstMonth = '' + year + ('' + (12 + parseInt(firstMonthTemp))).padStart(2, '0');
      }
    },

    // 子屏-初始化图表数据--案件行业分布
    getCaseRankIndustry_sub() {
      const url = api.getCaseRankIndustry;
      if (url) {
        let param = {};
        param.areaCode = this.areaCode;
        param.year = this.year;
        axios.post(url, param).then(res => {
          if(res.data.code) {
            console.log('子屏-初始化图表数据--案件行业分布--错误!');
            console.log(res.data);
          }
          this.initCaseRankIndustry_sub(res.data.result);
        }).catch(err => {});
      } else {
        this.initCaseRankIndustry_sub();
      }
    },
    // 案件行业分布（饼图）
    initCaseRankIndustry_sub(result) {
      let data1, data2;
      if (result) {
        data1 = [];
        data2 = [
          {
            color: '#FF4343',
            industry: '',
            proportion: 0
          },
          {
            color: '#F69846',
            industry: '',
            proportion: 0
          },
          {
            color: '#F6D54A',
            industry: '',
            proportion: 0
          },
          {
            color: '#86D560',
            industry: '',
            proportion: 0
          },
          {
            color: '#45DBF7',
            industry: '',
            proportion: 0
          },
          {
            color: '#4AC0FF',
            industry: '',
            proportion: 0
          },
          {
            color: '#4E82FF',
            industry: ' ',
            proportion: 0
          },
          {
            color: '#584BFF',
            industry: '',
            proportion: 0
          },
          {
            color: '#BE4DFF',
            industry: '',
            proportion: 0
          },
          {
            color: '#FF4BFF',
            industry: '',
            proportion: 0
          },
        ];
        for (let index in result) {
          if (index < 10) {
            data1.push({
              name: result[index].industry,
              value: Number(Math.round(result[index].accidentRate * 10000)) / 100
            })
            data2[index].industry = result[index].industry;
            data2[index].proportion = Number(round(result[index].accidentRate * 10000))/ 100;
          }
        }
      }
      const data1Demo = [
        {
          name: '金属制品业',
          value: 31,
        },
        {
          name: '其他制造业',
          value: 8
        },
        {
          name: '橡胶和塑料制品业',
          value: 5
        },
        {
          name: '商务服务业',
          value: 4
        },
        {
          name: '批发业',
          value: 4
        },
        {
          name: '零售业',
          value: 4
        },
        {
          name: '建筑装饰和其他建筑业',
          value: 3
        },
        {
          name: '通用设备制造业',
          value: 3
        },
        {
          name: '科技推广和应用服务业',
          value: 2
        },
        {
          name: '研究和试验发展',
          value: 2
        },
      ];
      const data2Demo = [
        {
          color: '#DD001B',
          industry: '金属制品业',
          proportion: 31
        },
        {
          color: '#FD6431',
          industry: '其他制造业',
          proportion: 8
        },
        {
          color: '#F48C90',
          industry: '橡胶和塑料制品业',
          proportion: 5
        },
        {
          color: '#71C9FD',
          industry: '商务服务业',
          proportion: 4
        },
        {
          color: '#50A1F7',
          industry: '批发业',
          proportion: 4
        },
        {
          color: '#A16D08',
          industry: '零售业',
          proportion: 4
        },
        {
          color: '#D6EBAA',
          industry: '建筑装饰和其他建筑业 ',
          proportion: 3
        },
        {
          color: '#29AB91',
          industry: '通用设备制造业',
          proportion: 3
        },
        {
          color: '#D6E0F2',
          industry: '科技推广和应用服务业',
          proportion: 2
        },
        {
          color: '#FEEDE8',
          industry: '研究和试验发展',
          proportion: 2
        },
      ];
      data1 = data1 || data1Demo;
      this.data_pie = data2 || data2Demo;
      if (this.myChart) {
        this.myChart.dispose();
      }
      this.myChart = echarts.init(document.getElementById("id_case"));
      let myChart = this.myChart;
      const option = {
        tooltip: {
          trigger: "item",
          formatter: "{a}<br>{b}: {c}%",
        },
        color: ["#FF4343", "#F69846", "#F6D54A", "#86D560", "#45DBF7", "#4AC0FF", "#4E82FF", "#584BFF", "#BE4DFF", "#FF4BFF", "#86D560"],
        series: [
          {
            name: "事故率",
            type: "pie",
            radius: ["50%", "75%"],
            avoidLabelOverlap: false,
            label: {
              normal: {
                show: false,
                position: "center",
              },
              emphasis: {
                show: true,
                textStyle: {
                  fontSize: "15",
                  fontWeight: "bold",
                },
              },
            },
            labelLine: {
              normal: {
                show: false,
              },
            },
            data: data1,
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: "rgba(0, 0, 0, 0.5)",
              },
            },
          },
        ],
      };
      // 饼图轮播部分--start
      let count = 0;
      let timeTicket = null;
      let dataLength = option.series[0].data.length;
      timeTicket && clearInterval(timeTicket);
      timeTicket = setInterval(function () {
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: count % dataLength,
        });
        count++;
      }, 2400);

      myChart.on("mouseover", function (params) {
        clearInterval(timeTicket);
        myChart.dispatchAction({
          type: "downplay",
          seriesIndex: 0,
        });
        myChart.dispatchAction({
          type: "highlight",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
        myChart.dispatchAction({
          type: "showTip",
          seriesIndex: 0,
          dataIndex: params.dataIndex,
        });
      });
      myChart.on("mouseout", function (params) {
        timeTicket && clearInterval(timeTicket);
        timeTicket = setInterval(function () {
          myChart.dispatchAction({
            type: "downplay",
            seriesIndex: 0,
          });
          myChart.dispatchAction({
            type: "highlight",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          myChart.dispatchAction({
            type: "showTip",
            seriesIndex: 0,
            dataIndex: count % dataLength,
          });
          count++;
        }, 2400);
      });
      // 饼图轮播部分--end
      option && myChart.setOption(option);
    },

    // 子屏-初始化图表数据--案件办理平均周期
    getCaseRegionCycle_sub() {
      const url = api.getCaseRegionCycle;
      if (url) {
        let param = {};
        param.year = this.year;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--案件办理平均周期--错误!');
            console.log(res.data);
          }
          this.initCaseRegionCycle_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initCaseRegionCycle_sub();
      }
    },
    // 案件办理平均周期
    initCaseRegionCycle_sub(result) {
      let xData, yData;
      if (result) {
        xData = [];
        yData = [];
        for (const item of result) {
          xData[xData.length] = item.areaCode;
          yData[yData.length] = item.avgDay;
        }
      }

      const demoXData = ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'];
      const demoYData = [31, 26, 27, 41, 32, 28, 25, 29];
      xData = xData || demoXData;
      yData = yData || demoYData;

      const myChart = echarts.init(document.getElementById("table_left6"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      // 悬浮窗轮播
      // myChart.dispatchAction({
      //   type: 'showTip',
      //   seriesIndex: 0,
      //   dataIndex: 0
      // });
      // let idx = 0;
      // setInterval(() => {
      //   myChart.dispatchAction({
      //     type: 'showTip',
      //     seriesIndex: 0,
      //     dataIndex: idx
      //   });
      //   idx++;
      //   if (idx >= this.data.area.length) {
      //     idx = 0;
      //   }
      // }, 2400);
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '13%'
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          boundaryGap: true,
          data: xData,
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "时常:小时",
            min: 0,
            max: 60,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '单位',
            type: 'line',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 7,
            data: yData,
            areaStyle: {
              opacity: 0.6,
              color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                offset: 0,
                color: "#08244C" // 0% 处的颜色
              }, {
                offset: 1,
                color: "#02A8F1" // 100% 处的颜色
              }], false),
            },
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: "#02A8F1"
              }
            },
          },
        ],
      };
      option && myChart.setOption(option);
    },

    // 子屏-初始化图表数据--案件处置协同
    getCooperationHandle_sub() {
      const url = api.getCooperationHandle;
      if (url) {
        let param = {};
        param.areaCode = this.areaCode;
        param.startYear = this.firstMonth;
        param.endYear = this.lastMonth;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--案件处置协同--错误!');
            console.log(res.data);
          }
          this.initCooperationHandle_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initCooperationHandle_sub();
      }
    },
    // 案件处置协同
    initCooperationHandle_sub(category) {
      const demoCategory = [
        {
          name: "XX局",
          value: 500
        },
        {
          name: "XX局",
          value: 510
        },
        {
          name: "XX局",
          value: 520
        },
        {
          name: "管理处",
          value: 539
        },
        {
          name: "应急局",
          value: 570
        }, {
          name: "公安局",
          value: 580
        }
      ];
      category = category || demoCategory;
      const total = 600;

      const myChart = echarts.init(document.getElementById("table_right3"))
      let datas = [];
      category.forEach(value => {
        datas.push(value.value);
      });
      const option = {
        xAxis: {
          max: total,
          splitLine: {
            show: false
          },
          axisLine: {
            show: false
          },
          axisLabel: {
            show: false
          },
          axisTick: {
            show: false
          }
        },
        grid: { // 设置条形图的边距
          left: 80,
          top: 20,
          right: 80,
          bottom: 20
        },
        yAxis: [{
          type: "category",
          inverse: false,
          data: category,
          axisLine: {
            show: false
          },
          axisTick: {
            show: false
          },
          axisLabel: {
            show: false
          }
        }],
        series: [{
          // 内
          type: "bar",
          barWidth: 7,
          legendHoverLink: false,
          silent: true,
          itemStyle: {
            normal: {
              color: function (params) {
                let color = {
                  type: "linear",
                  x: 0,
                  y: 0,
                  x2: 1,
                  y2: 0,
                  colorStops: [{
                    offset: 0,
                    color: "#008EFD" // 0% 处的颜色
                  },
                    {
                      offset: 1,
                      color: "#00B1FD" // 100% 处的颜色
                    }
                  ]
                };
                return color;
              },
            }
          },
          label: {
            normal: {
              show: true,
              position: "left",
              formatter: "{b}",
              textStyle: {
                color: "#fff",
                fontSize: 12
              }
            }
          },
          data: category,
          z: 1,
          animationEasing: "elasticOut"
        },
          {
            // 分隔
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#061348"
              }
            },
            symbolRepeat: "fixed",
            symbolMargin: 2,
            symbol: "rect",
            symbolClip: true,
            symbolSize: [1, 9],
            symbolPosition: "start",
            symbolOffset: [1, -1],
            symbolBoundingData: this.total,
            data: category,
            z: 2,
            animationEasing: "elasticOut"
          },
          {
            // 外边框
            type: "pictorialBar",
            symbol: "rect",
            symbolBoundingData: total,
            itemStyle: {
              normal: {
                color: "none"
              }
            },
            label: {
              normal: {
                formatter: (params) => {
                  return '{a|  ' + params.data + '件}' + '{a|  (85%)}';
                },
                rich: {
                  a: {
                    color: '#FFF'
                  }
                },
                position: 'right',
                distance: 0, // 向右偏移位置
                show: true
              }
            },
            data: datas,
            z: 0,
            animationEasing: "elasticOut"
          },
          {
            name: "外框",
            type: "bar",
            barGap: "-120%", // 设置外框粗细
            data: [total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total, total],
            barWidth: 9,
            itemStyle: {
              normal: {
                color: "transparent", // 填充色
                barBorderColor: "#01418E", // 边框色
                barBorderWidth: 1, // 边框宽度
                // barBorderRadius: 0, //圆角半径
                label: {
                  // 标签显示位置
                  show: false,
                  position: "top" // insideTop 或者横向的 insideLeft
                }
              }
            },
            z: 0
          }
        ]
      };
      option && myChart.setOption(option);
    },

    // 子屏-初始化图表数据--重点企业清单
    getCaseCompany_sub() {
      const url = api.getCaseCompany;
      if (url) {
        let param = {};
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--重点企业清单--错误!');
            console.log(res.data);
          }
          this.initCaseCompany_sub(res.data.result);
        }).catch(err => {
        });
      } else {
        this.initCaseCompany_sub();
      }
    },
    // 重点企业清单
    initCaseCompany_sub(result) {
      const dataDemo = [
        ['浙江大华', '200', '1%'],
        ['浙江大华', '200', '1%'],
        ['浙江大华', '200', '1%'],
        ['浙江大华', '200', '1%'],
        ['浙江大华', '200', '1%'],
        ['浙江大华', '200', '1%']
      ];
      this.config_data1.data = result || dataDemo;
    },

    // 子屏-初始化图表数据--最新办结清单
    getCaseFinish_sub() {
      const url = api.getCaseFinish;
      if (url) {
        let param = {};
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--最新办结清单--错误!');
            console.log(res.data);
          }
          this.initCaseFinish_sub(res.data.result);
        }).catch(err => {});
      } else {
        this.initCaseFinish_sub();
      }
    },
    // 最新办结清单
    initCaseFinish_sub(result) {
      const dataDemo = [
        ['张三', '二级', '2022.01.25',1],
        ['张三', '二级', '2022.01.25',1],
        ['张三', '二级', '2022.01.25',1],
        ['张三', '二级', '2022.01.25',1],
        ['张三', '二级', '2022.01.25',1],
        ['张三', '二级', '2022.01.25',1],
      ];
      this.config_data2.data = result || dataDemo;
    },

    // 案件数事故率
    getCaseRegion_sub() {
      const url = api.getCaseRegion;
      if (url) {
        let param = {};
        param.areaCode = this.areaCode;
        param.year = this.year;
        axios.post(url, param).then(res => {
          if (res.data.code) {
            console.log('初始化图表数据--案件数事故率--错误!');
            console.log(res.data);
          }
          this.accidentRate = res.data.result.sgl * 100;
          this.cases = res.data.result.ajs;
        }).catch(err => {});
      }
    },

    echartsTableInit3() {
      const myChart = echarts.init(document.getElementById("cases"))
      const posList = [
        'left',
        'right',
        'top',
        'bottom',
        'inside',
        'insideTop',
        'insideLeft',
        'insideRight',
        'insideBottom',
        'insideTopLeft',
        'insideTopRight',
        'insideBottomLeft',
        'insideBottomRight'
      ]
      let app = {}
      app.configParameters = {
        rotate: {
          min: -90,
          max: 90
        },
        align: {
          options: {
            left: 'left',
            center: 'center',
            right: 'right'
          }
        },
        verticalAlign: {
          options: {
            top: 'top',
            middle: 'middle',
            bottom: 'bottom'
          }
        },
        position: {
          options: posList.reduce(function (map, pos) {
            map[pos] = pos;
            return map;
          }, {})
        },
        distance: {
          min: 0,
          max: 100
        }
      };
      app.config = {
        rotate: 90,
        align: 'left',
        verticalAlign: 'middle',
        position: 'insideBottom',
        distance: 15,
        onChange: function () {
          const labelOption = {
            rotate: app.config.rotate,
            align: app.config.align,
            verticalAlign: app.config.verticalAlign,
            position: app.config.position,
            distance: app.config.distance
          };
          myChart.setOption({
            series: [
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              },
              {
                label: labelOption
              }
            ]
          });
        }
      };
      const labelOption = {
        show: false,
        position: app.config.position,
        distance: app.config.distance,
        align: app.config.align,
        verticalAlign: app.config.verticalAlign,
        rotate: app.config.rotate,
      };
      const option = {
        // 图表在容器内的位置
        grid: {
          top: '20%',
          right: '0%',
          bottom: '25%',
          left: '13%'
        },
        // 图例
        legend: {
          top: '0%',
          textStyle: {
            color: '#fff'
          },
          data: ['单位', '个人'],
        },
        // 悬浮提示框
        tooltip: {
          trigger: 'axis',
          axisPointer: {
            type: 'shadow'
          }
        },
        // X轴
        xAxis: [{
          type: 'category',
          data: ['金华市', '兰溪市', '义乌市', '东阳市', '永康市', '武义市', '浦江市', '磐安市'],
          axisLabel: {  // 标签
            textStyle: {
              color: '#8c8c92',
            },
            interval: 0, //坐标刻度之间的显示间隔，默认就可以了（默认是不重叠）
            rotate: 60   //调整数值改变倾斜的幅度（范围-90到90）
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: '#014C7D'
            }
          },
        }],
        yAxis: [
          {
            type: 'value',
            name: "次",
            min: 0,
            max: 50,
            interval: 10,
            nameTextStyle: {
              color: '#8c8c92',
              fontSize: 11,
              nameLocation: "start",
            },
            axisLabel: {  // 标签
              textStyle: {
                color: '#8c8c92',
              }
            },
            axisLine: {
              lineStyle: {
                color: '#014C7D'
              }
            },
            // 切割线
            splitLine: {
              show: true,
              lineStyle: {
                color: '#014C7D'
              }
            },
          }
        ],
        series: [
          {
            name: '单位',
            type: 'bar',
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            barWidth: 7,
            data: [31, 26, 27, 41, 32, 28, 25, 29],
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 1, 0, 0, [{
                  offset: 0,
                  color: "#08244C" // 0% 处的颜色
                }, {
                  offset: 1,
                  color: "#2A76F2" // 100% 处的颜色
                }], false),
              }
            },
          },
          {
            name: '个人',
            type: 'bar',
            barGap: 0,
            label: labelOption,
            emphasis: {
              focus: 'series'
            },
            data: [26, 23, 29, 39, 30, 27, 23, 26],
            barWidth: 7,
            itemStyle: {
              normal: {
                opacity: 1,
                barBorderRadius: [20, 20, 0, 0],
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [{
                  offset: 0,
                  color: '#54FFFF'
                }, {
                  offset: 1,
                  color: '#06152A'
                }]),
              }
            },
          }
        ]
      }
      option && myChart.setOption(option);
    },
    open() {
      this.$nextTick(() => {
        this.initMonth();
        this.getCaseRankIndustry_sub();
        this.getCaseRegionCycle_sub();
        this.getCooperationHandle_sub();
        this.getCaseCompany_sub();
        this.getCaseFinish_sub();
        this.getCaseRegion_sub();
        this.echartsTableInit3();
      })
    },
    // 关闭对话框的回调，调用父组件方法
    closeDialog() {
      this.$emit("closeDialog")
    },
  }
}
</script>

<style scoped>
* {
  margin: 0;
  padding: 0;
  font-family: 微软雅黑;
}

body {
  width: 100%;
  height: 100%;
}

main {
  width: 1737px;
  height: 833px;
  margin-left: 46px;
}

.left {
  float: left;
  height: 620px;
  width: 579px;
}

.mid {
  float: left;
  height: 620px;
  width: 579px;
}

.right {
  float: left;
  height: 620px;
  width: 579px;
}

.bottom {
  float: left;
  height: 213px;
  width: 1737px;
}

.table1 {
  float: left;
  height: 213px;
  width: 1158px;
}

.water {
  float: left;
  width: 579px;
  height: 213px;
}

.right_data2 {
  height: 46%;
  width: 100%;
}

.data_table {
  margin-left: 3%;
  width: 97%;
  height: 66%;
}

.data2_title {
  background: url("../assets/subtitle_long.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 100%;
  line-height: 180%;
  margin-bottom: 1%;
  margin-top: .5%;
  font-size: 1.4rem;
  font-weight: 600;
  color: #DCF3FF;
}

.sub_titleBar {
  background: url("../assets/head_bg2.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  width: 1737px;
  height: 80px;
  margin-top: -13px;
  margin-left: 46px;
}

.sub_title {
  position: absolute;
  left: 45%;
  color: #BDE4FF;
  font-size: 38px;
  font-weight: 600;
  margin-top: 18px;
}

.btn_bottom :hover {
  color: #F9D494;
}

.insured {
  height: 35%;
  width: 100%;
  margin-bottom: 6%;
}

.box_left2 {
  height: 40%;
  width: 100%;
  background-color: #FBD533;
}

.data3_table {
  width: 100%;
  height: 45%;
}

.data2_table {
  margin-left: 31px;
  margin-top: 10px;
  width: 94%;
  height: 75%;
}

.table_title {
  background: url("../assets/subtitle_short.png");
  overflow: hidden;
  background-size: cover;
  text-align: left;
  padding-left: 10%;
  font-size: 1.2rem;
  font-weight: 600;
  color: white;
}

.height_left2 {
  height: 14%;
  line-height: 170%;
}

.height_left3 {
  height: 15%;
  line-height: 200%;
}

.height_right1 {
  height: 18%;
  line-height: 200%;
}

.height_left1 {
  height: 18%;
  line-height: 170%;
}

footer {
  background: url("../assets/footer.png") no-repeat;
  overflow: hidden;
  background-size: cover;
  height: 8.2%;
  width: 100%;
  position: absolute;
  bottom: 0;
}
</style>

<style>
.my-info-dialog .el-dialog__body {
  background-image: url("../assets/bg07.jpg");
  width: 1740px;
  height: 880px;
  overflow: hidden;
  background-size: cover;
  margin-top: -30px;
}

.customWidth {
  width: 1780px;
  height: 940px;
}
</style>
